<template>
    <div class="app-container">

      <CustomContent>
        <template v-slot:body>

          <MmvTitle title="订单信息"></MmvTitle>
          <el-descriptions class="table-margin" :column="3" border>
            <el-descriptions-item label-class-name="my-descriptions-label" >
              <template slot="label"> 订单编号</template>
              {{ detail.orderInfo.orderNo }}
            </el-descriptions-item>

            <el-descriptions-item label-class-name="my-descriptions-label"
            >
              <template slot="label"> 订单状态
              </template
              >
              <dict-tag
                :options="dict.type.sys_order_status"
                :value="detail.orderInfo.orderStatus"
              />
            </el-descriptions-item>

            <el-descriptions-item label-class-name="my-descriptions-label"
            >
              <template slot="label"> 取车时间
              </template
              >
              {{ detail.orderInfo.rentalStartTime }}
            </el-descriptions-item
            >
            <el-descriptions-item label-class-name="my-descriptions-label"
            >
              <template slot="label"> 还车时间
              </template
              >
              {{ detail.orderInfo.rentalEndTime }}
            </el-descriptions-item
            >
            <el-descriptions-item label-class-name="my-descriptions-label"
            >
              <template slot="label"> 租期(月)
              </template
              >
              {{ detail.orderInfo.tenancyTerm }}
            </el-descriptions-item
            >



            <el-descriptions-item label-class-name="my-descriptions-label"
                                  span="3"
                                  v-if="
                  detail.orderInfo.rentalType == 3 ||
                  detail.orderInfo.rentalType == 4
                "
            >
              <template slot="label"> 预约取车地址
              </template
              >
              {{ detail.orderInfo.takeAddress }}
            </el-descriptions-item
            >
            <el-descriptions-item label-class-name="my-descriptions-label"
                                  span="3"
                                  v-if="
                  detail.orderInfo.rentalType == 3 ||
                  detail.orderInfo.rentalType == 5
                "
            >
              <template slot="label"> 预约还车地址
              </template
              >
              {{ detail.orderInfo.alsoAddress }}
            </el-descriptions-item
            >

            <el-descriptions-item label-class-name="my-descriptions-label"
            >
              <template slot="label"> 取车门店
              </template
              >
              {{
                detail.orderInfo.takeStoreName
              }}
            </el-descriptions-item
            >
            <el-descriptions-item label-class-name="my-descriptions-label"
            >
              <template slot="label"> 还车门店
              </template
              >
              {{
                detail.orderInfo.alsoStoreName
              }}
            </el-descriptions-item
            >

          </el-descriptions>
          <template v-if="detail.carInfo.carNo">
            <MmvTitle title="车辆信息"></MmvTitle>
            <el-descriptions class="table-margin" :column="3" border>
              <el-descriptions-item label-class-name="my-descriptions-label"
              >
                <template slot="label"> 分配车辆
                </template
                >
                {{
                  detail.orderInfo.actualModelName || '--'
                }}
              </el-descriptions-item
              >
              <el-descriptions-item label-class-name="my-descriptions-label"
              >
                <template slot="label"> 车牌号
                </template
                >
                {{ detail.carInfo.carNo || '--' }}
              </el-descriptions-item
              >
              <el-descriptions-item label-class-name="my-descriptions-label"
              >
                <template slot="label"> 车架号
                </template
                >
                {{ detail.carInfo.vinNo || '--' }}
              </el-descriptions-item
              >
              <el-descriptions-item label-class-name="my-descriptions-label"
              >
                <template slot="label"> 发动机号
                </template
                >
                {{ detail.carInfo.engineNo || '--' }}
              </el-descriptions-item
              >
              <el-descriptions-item label-class-name="my-descriptions-label"
              >
                <template slot="label"> 能源形式
                </template
                >
                <dict-tag
                  :options="dict.type.style_model"
                  :value="detail.carInfo.styleModel"
                />
              </el-descriptions-item>
              <el-descriptions-item label-class-name="my-descriptions-label"
              >
                <template slot="label"> 燃油类型
                </template
                >
                <dict-tag
                  :options="dict.type.fuel_type"
                  :value="detail.carInfo.fuelType"
                />
              </el-descriptions-item>
              <el-descriptions-item label-class-name="my-descriptions-label"
              >
                <template slot="label"> 变速箱
                </template
                >
                <dict-tag
                  :options="dict.type.speed_changing_box"
                  :value="detail.carInfo.speedChangingBox"
                />
              </el-descriptions-item>
              <el-descriptions-item label-class-name="my-descriptions-label"
              >
                <template slot="label"> 座位数
                </template
                >
                <dict-tag
                  :options="dict.type.seat"
                  :value="detail.carInfo.seating"
                />
              </el-descriptions-item>
              <el-descriptions-item label-class-name="my-descriptions-label"
              >
                <template slot="label"> 排量
                </template
                >
                <dict-tag
                  :options="dict.type.displacement"
                  :value="detail.carInfo.displacement"
                />
              </el-descriptions-item>
              <el-descriptions-item label-class-name="my-descriptions-label"  v-if="detail.carInfo.sameJobName"
              >
                <template slot="label"> 所属同行
                </template
                >
                {{ detail.carInfo.sameJobName }}
              </el-descriptions-item>
            </el-descriptions>
          </template>

          <MmvTitle title="客户信息"></MmvTitle>

          <MemberDetail :detail="detail.customerInfo"></MemberDetail>

          <MmvTitle
            title="交车验车单"
            v-if="
                detail.orderInfo.orderStatus > 3 &&
                detail.orderInfo.orderStatus !=10
              "
          ></MmvTitle>
          <el-descriptions
            class="table-margin"
            :column="2"
            border
            v-if="
                detail.orderInfo.orderStatus > 3 &&
                detail.orderInfo.orderStatus !=10
              "
          >
            <el-descriptions-item label-class-name="my-descriptions-label"
            >
              <template slot="label"> 车辆油量
              </template
              >
              {{
                detail.carInspection.fuelCapacity
              }}/16
            </el-descriptions-item
            >
            <el-descriptions-item label-class-name="my-descriptions-label"
            >
              <template slot="label"> 公里数
              </template
              >
              {{ detail.carInspection.vehicleMileage }}
            </el-descriptions-item
            >
            <el-descriptions-item label-class-name="my-descriptions-label"
            >
              <template slot="label"> 验车时间
              </template
              >
              {{
                new Date(detail.carInspection.takeAlsoTime) | parseTime
              }}
            </el-descriptions-item
            >
            <el-descriptions-item label-class-name="my-descriptions-label"
            >
              <template slot="label"> 车辆随车物品
              </template
              >
              {{ detail.carInspection.accessoryItems }}
            </el-descriptions-item
            >
            <el-descriptions-item label-class-name="my-descriptions-label"  span="2"
            >
              <template slot="label"> 其他描述
              </template
              >
              {{ detail.carInspection.remark }}
            </el-descriptions-item
            >
            <el-descriptions-item label-class-name="my-descriptions-label"  span="2">
              <template slot="label"> 车身照片</template>
              <template v-for="item in detail.carInspection.bodyImage">
                <el-image
                  :key="item"
                  :src="item | mmvImageUrl"
                  :preview-src-list="[$mmvImageUrl(item)]"
                  class="mmv-image"
                  fit="cover"
                  style="width:160px;height:90px;margin-right:15px;"
                ></el-image>
              </template>
            </el-descriptions-item>
            <el-descriptions-item label-class-name="my-descriptions-label"  span="2">
              <template slot="label"> 车辆划痕</template>
              <template v-for="item in detail.carInspection.scratchImage">
                <el-image
                  :key="item"
                  :src="item | mmvImageUrl"
                  :preview-src-list="[$mmvImageUrl(item)]"
                  class="mmv-image"
                  fit="cover"
                  style="width:160px;height:90px;margin-right:15px;"
                ></el-image>
              </template>
            </el-descriptions-item>
            <el-descriptions-item label-class-name="my-descriptions-label"  span="2">
              <template slot="label"> 内饰照片</template>
              <template v-for="item in detail.carInspection.interiorImage">
                <el-image
                  :key="item"
                  :src="item | mmvImageUrl"
                  :preview-src-list="[$mmvImageUrl(item)]"
                  class="mmv-image"
                  fit="cover"
                  style="width:160px;height:90px;margin-right:15px;"
                ></el-image>
              </template>
            </el-descriptions-item>
            <el-descriptions-item label-class-name="my-descriptions-label"  span="2">
              <template slot="label"> 仪表盘</template>
              <template v-for="item in detail.carInspection.panelImage">
                <el-image
                  :key="item"
                  :src="item | mmvImageUrl"
                  :preview-src-list="[$mmvImageUrl(item)]"
                  class="mmv-image"
                  fit="cover"
                  style="width:160px;height:90px;margin-right:15px;"
                ></el-image>
              </template>
            </el-descriptions-item>
            <el-descriptions-item label-class-name="my-descriptions-label"  span="2">
              <template slot="label"> 客户签名</template>
              <template v-for="item in detail.carInspection.signImage">
                <el-image
                  :key="item"
                  :src="item | mmvImageUrl"
                  :preview-src-list="[$mmvImageUrl(item)]"
                  class="mmv-image"
                  fit="cover"
                  style="width:160px;height:90px;margin-right:15px;"
                ></el-image>
              </template>
            </el-descriptions-item>
          </el-descriptions>

          <MmvTitle
            title="还车验车单"
            v-if="
                detail.orderInfo.orderStatus > 4 &&
                detail.orderInfo.orderStatus !=10
              "
          ></MmvTitle>
          <el-descriptions
            class="table-margin"
            :column="2"
            border
            v-if="
                detail.orderInfo.orderStatus > 4 &&
                detail.orderInfo.orderStatus !=10
              "
          >
            <el-descriptions-item label-class-name="my-descriptions-label"
            >
              <template slot="label"> 车辆油量
              </template
              >
              {{ detail.alsoCarCheck.fuelCapacity }}/16
            </el-descriptions-item
            >
            <el-descriptions-item label-class-name="my-descriptions-label"
            >
              <template slot="label"> 公里数
              </template
              >
              {{ detail.alsoCarCheck.vehicleMileage }}
            </el-descriptions-item
            >
            <el-descriptions-item label-class-name="my-descriptions-label"
            >
              <template slot="label"> 验车时间
              </template
              >
              {{
                new Date(detail.alsoCarCheck.takeAlsoTime) | parseTime
              }}
            </el-descriptions-item
            >
            <el-descriptions-item label-class-name="my-descriptions-label"
            >
              <template slot="label"> 车辆随车物品
              </template
              >
              {{ detail.alsoCarCheck.accessoryItems }}
            </el-descriptions-item
            >
            <el-descriptions-item label-class-name="my-descriptions-label"  span="2"
            >
              <template slot="label"> 其他描述
              </template
              >
              {{ detail.alsoCarCheck.remark }}
            </el-descriptions-item
            >
            <el-descriptions-item label-class-name="my-descriptions-label"  span="2">
              <template slot="label"> 车身照片</template>
              <template v-for="item in detail.alsoCarCheck.bodyImage">
                <el-image
                  :key="item"
                  :src="item | mmvImageUrl"
                  :preview-src-list="[$mmvImageUrl(item)]"
                  class="mmv-image"
                  fit="cover"
                  style="width:160px;height:90px;margin-right:15px;"
                ></el-image>
              </template>
            </el-descriptions-item>
            <el-descriptions-item label-class-name="my-descriptions-label"  span="2">
              <template slot="label"> 车辆划痕</template>
              <template v-for="item in detail.alsoCarCheck.scratchImage">
                <el-image
                  :key="item"
                  :src="item | mmvImageUrl"
                  :preview-src-list="[$mmvImageUrl(item)]"
                  class="mmv-image"
                  fit="cover"
                  style="width:160px;height:90px;margin-right:15px;"
                ></el-image>
              </template>
            </el-descriptions-item>
            <el-descriptions-item label-class-name="my-descriptions-label"  span="2">
              <template slot="label"> 内饰照片</template>
              <template v-for="item in detail.alsoCarCheck.interiorImage">
                <el-image
                  :key="item"
                  :src="item | mmvImageUrl"
                  :preview-src-list="[$mmvImageUrl(item)]"
                  class="mmv-image"
                  fit="cover"
                  style="width:160px;height:90px;margin-right:15px;"
                ></el-image>
              </template>
            </el-descriptions-item>
            <el-descriptions-item label-class-name="my-descriptions-label"  span="2">
              <template slot="label"> 仪表盘</template>
              <template v-for="item in detail.alsoCarCheck.panelImage">
                <el-image
                  :key="item"
                  :src="item | mmvImageUrl"
                  :preview-src-list="[$mmvImageUrl(item)]"
                  class="mmv-image"
                  fit="cover"
                  style="width:160px;height:90px;margin-right:15px;"
                ></el-image>
              </template>
            </el-descriptions-item>
            <el-descriptions-item label-class-name="my-descriptions-label"  span="2">
              <template slot="label"> 客户签名</template>
              <template v-for="item in detail.alsoCarCheck.signImage">
                <el-image
                  :key="item"
                  :src="item | mmvImageUrl"
                  :preview-src-list="[$mmvImageUrl(item)]"
                  class="mmv-image"
                  fit="cover"
                  style="width:160px;height:90px;margin-right:15px;"
                ></el-image>
              </template>
            </el-descriptions-item>
          </el-descriptions>
        </template>
        <template v-slot:footer>
          <div class="footer">
            <el-button type="info" plain @click.native="close">取消</el-button>
          </div>
        </template>


      </CustomContent>
    </div>
</template>

<script>
import * as api from '@/api/longOrder/index'
import MmvTitle from '@/components/MmvUI/MmvTitle.vue';
import CustomContent from "@/components/custom/content";
import MemberDetail from "@/views/components/memberDetail";

export default {
    components: {
        MmvTitle,
      CustomContent,
      MemberDetail
    },
    props: ['orderNo'],
    filters: {
        memberType(val) {
            return {
                1: '企业',
                2: '个人',
            }[Number(val)] || '';
        },
        memberSource(val) {
            return {
                1: '搜索',
                2: '分享',
                3: '扫码',
                4: '手动录入',
            }[Number(val)] || '';
        },
        imageUrl(url) {
            return process.env.VUE_APP_BASE_IMAGE_URL + url
        },
    },
    dicts: ['memberType', 'sys_order_source', 'sys_order_status', 'style_model', 'fuel_type', 'speed_changing_box', 'seat', 'displacement'],
    data() {
        return {
          orderNo: null,
            loading: false,
            detail: {
                "orderInfo": {//订单信息
                    "orderNo": '', //  "05055c045ad744799ee12ac0f3f41050",//订单编号
                    "orderStatus": '', //  11,//订单状态
                    "rentalType": '', //  null,//取车类型
                    "takeStoreName": '', //  "北广场自助点",//取车门店
                    "alsoStoreName": '', //  "北广场自助点",//还车门店
                    "actualStartTime": '', //  null,//实际取车时间
                    "actualEndTime": '', //  null,//实际还车时间
                    "leaseDays": '', //  2//租赁天数
                },
                "carInfo": {//车辆信息
                    "modelName": '', //  "风骏5",//预定品牌/车系/车型
                    "carNo": '', //  null,//车牌号
                    "vinNo": '', //  null,//车架号
                    "engineNo": '', //  null,//发动机号
                    "styleModel": '', //  null,//能源形式
                    "fuelType": '', //  null,//燃油类型
                    "speedChangingBox": '', //  null,//变速箱
                    "seating": '', //  null,//座位数
                    "displacement": '', //  null//排量
                },
                "customerInfo": {//客户信息
                    "memberNo": '', //  "M16462134546695155",//客户编号
                    "memberType": '', //  2,//客户类型
                    "memberName": '', //  "代元宝",//客户名称/企业名称
                    "memberSource": '', //  4,//客户来源
                    "contactPhone": '', //  "13892006829",//联系电话
                    "contactAddress": '', //  "陕西省西安市碑林区",//联系地址 /企业地址
                    "cardId": '', //  "610423198901224412",//证件号
                    "cardValidity": '', //  "2026-01-01",//证件有效期
                    "sfUrl": [], //证件图片
                    "drivingId": '', // "610423198901224412",//驾驶证编号
                    "drivingType": '', // "c1",//驾驶证类型
                    "drivingValidity": '', // "2026-01-01",//驾驶证有效期
                    "jsUrl": [],//驾驶证图片
                    "businessLicenseUrl": null,//营业执照
                    "creditCode": null //统一社会信用代码
                },
                "carInspection": {//交车验车单
                    "id": '', //  "05055c045ad744799ee12ac0f3f41051",
                    "fuelCapacity": '', //  1.0,//车辆油量
                    "vehicleMileage": '', //  1.0,//公里数
                    "accessoryItems": '', //  null,//车辆随车物品(逗号隔开)
                    "remark": '', //  null,//其他描述
                    "takeAlsoTime": '', //  null,//取车时间
                    "conductor": '', //  "张三",//处理人
                    "bodyImage": [], //  null,//车身照片
                    "panelImage": [], //  null,//仪表盘
                    "interiorImage": [], //  null,//内饰照片
                    "scratchImage": [], //  null,//车辆划痕
                    "signImage": [], //  null//客户签名
                },
                "alsoCarCheck": {//还车验车单
                    "id": '', //  "05055c045ad744799ee12ac0f3f41051",
                    "fuelCapacity": '', //  1.0,//车辆油量
                    "vehicleMileage": '', //  1.0,//公里数
                    "accessoryItems": '', //  null,//车辆随车物品(逗号隔开)
                    "remark": '', //  null,//其他描述
                    "takeAlsoTime": '', //  null,//还车时间
                    "conductor": '', //  "张三",//处理人
                    "lkosten": '', //  null,//补充油费(还车验车)
                    "bodyImage": [], //  null,//车身照片
                    "panelImage": [], //  null,//仪表盘
                    "interiorImage": [], //  null,//内饰照片
                    "scratchImage": [], //  null,//车辆划痕
                    "signImage": [], //  null//客户签名
                }
            },
        }
    },
    created() {
      this.orderNo = this.$route.query.orderNo
        this.getData();
    },
    methods: {
        getData() {
            this.loading = true
            api.detail(this.orderNo).then(response => {
                this.loading = false;
                // console.log(response)
                // this.detail = response.data || {};
                this.detail.orderInfo = response.data.orderInfo || {};
                this.detail.customerInfo = response.data.customerInfo || {};
                this.detail.carInfo = response.data.carInfo || {};
                this.detail.alsoCarCheck = response.data.alsoCarCheck || {};
                this.detail.carInspection = response.data.carInspection || {};
                this.detail.alsoCarCheck = response.data.alsoCarCheck || {};
            });
        },
    },
}
</script>
